<template>
	<view class="bg">
		<view class="back">

		</view>
		<view class="title">
			<view class="title1">
				输入短信验证码
			</view>
			<view class="title2">
				已向你的手机{{ phone }}发送验证码
			</view>
		</view>
		<view class="verification-code-input">
			<view class="cinputBox">
				<input class="cinput" adjust-position="false" auto-blur="true" @blur="blur" @input="codenum"
					:focus="focus" v-model="code" type="number" maxlength="4" />
			</view>

			<view class="code-input" ref="codeview">
				<view v-for="(item, index) in 4" :key="index" @click="codefocus(index)" class="code"
					:style='(index == code.length ? "border: 5rpx solid #1195db;width: 80rpx;height: 80rpx;line-height: 80rpx;" : "color: " + codeclolor + ";" + "border: 2rpx solid" + codeclolor)'>
					{{ code[index] || '' }}
				</view>
			</view>
		</view>
		<view class="noMessages">
			<text>重新发送</text>
		</view>
		<view class="login" @click="getLogin">
			下一步
		</view>
		<view class="btn_back" @click="back">
			返回
		</view>
	</view>
</template>
<script>
// import {
// 	zim
// } from '@/zim/index.js';
// import {
// 	generateToken
// } from '@/im/js/config.js';
export default {
	data() {
		return {
			// 验证码输入聚焦
			focus: true, //input焦点，用于键盘隐藏后重新唤起
			// 验证码框颜色
			codeclolor: "#313131", //自定义光标的颜色
			// 验证码获取秒数
			sec: '50', //这是重新获取验证码的倒计时
			code: '', //这是用户输入的验证码
			phone: 0
		};
	},
	methods: {
		// 输入验证码
		codenum(event) {
			let code = event.target.value
			this.code = code
		},
		// 键盘隐藏后设置失去焦点
		blur() {
			// this.focus = false
		},
		// 点击自定义光标显示键盘
		codefocus(e) {

			this.focus = true
		},
		back() {
			uni.navigateBack()
		},
		async getLogin() {
			let _this = this;
			if (this.code.length < 4) {
				this.$pv.msg('请输入正确的验证码')
			} else {
				let res = await this.$api.post('/User/MobileLogin', {
					Phone: this.phone,
					SMSCode: this.code.toString()
				})
				// console.log(res.data);
				uni.setStorageSync('xj_token', res.data.Token);

				let user = res.data.UserData;

				if (user.IsAuth == 0) {
					//新用户，直接跳注册页面
					this.nav_to('/pages/start/start2');

					return;
				}

				// console.log('login user ' + JSON.stringify(user));
				uni.setStorageSync('user', user);

				//本地存储用户手机号
				uni.setStorageSync('app_user_mobile', this.phone);

				this.$store.commit('setUser', user);
				this.$store.commit('login', true);
				//app注释
				uni.getLocation({
					type: 'gcj02',
					success: async function (r2) {
						let r = await _this.$api.post('/Member/SaveOnlineData', {
							Last_Lat: r2.latitude,
							Last_Lng: r2.longitude
						})
					},
					fail: function (err) {

					}
				});
				// let zimUser = {
				// 	userID: user.UserID + "",
				// 	userName: user.Name,
				// }
				// let zimToken = generateToken(zimUser.userID)
				// let userAvatarUrl = user.HeadImgUrl;

				// uni.setStorageSync('zimData', JSON.stringify({
				// 	zimUser,
				// 	zimToken,
				// 	userAvatarUrl
				// }))
				// zim.login(zimUser, zimToken, userAvatarUrl).then(() => {
				// 	console.log('yzmLogin vue   getLogin  zim登录成功');
				// }).catch((err)=>{
				// 	console.log('yzmLogin vue   getLogin  zim登录失败',err);
				// })
				uni.switchTab({
					url: '/pages/tab/home'
				})
			}

		},
	},
	onLoad(e) {
		this.phone = e.phone
	},
};
</script>

<style lang="scss">
body,
html {
	width: 100%;
	height: 100vh;
}

.bg {
	box-sizing: border-box;
	width: 100%;
	height: 100vh;
	background-color: #fff;
	padding: 0 40rpx;
	padding-top: 60rpx;

	.back {
		width: 60rpx;
		height: 120rpx;

		text-align: center;
		line-height: 60rpx;
		font-size: 60rpx;
		font-weight: 500;
		color: #000;
	}

	.title {
		margin: 60rpx 0 30rpx 16rpx;

		.title1 {
			font-size: 24px;
			color: #000;
		}

		.title2 {
			font-size: 14px;
			color: #333;
		}
	}

	.noMessages {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
		margin-right: 10rpx;

		text {
			color: #0000FF;
			font-size: 15px;
		}

	}

	.login {
		width: 100%;
		box-sizing: border-box;
		box-shadow: 0px 4rpx 16rpx 0px rgba(46, 46, 46, 0.4);
		background-image: linear-gradient(225deg, rgba(2, 2, 2, 0.9) 0, rgba(54, 54, 54, 0.9) 100%);
		border-radius: 6px;
		margin-top: 40rpx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;
	}

	.btn_back {
		width: 100%;
		box-shadow: 0px 4px 10px 0px rgba(46, 46, 46, 0.4);
		border-radius: 6px;
		text-align: center;
		margin-top: 40rpx;
		color: #000;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 90rpx;
	}
}

.code-input {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.code {
	width: 56px;
	height: 56px;
	text-align: center;
	line-height: 56px;
	font-size: 24px;
	border: none;
	outline: none;
	background-color: transparent;
	margin-right: 8px;
	border-bottom: 1px solid #999
}

.verification-code-input {
	position: relative;
	overflow: hidden;

	.cinputBox {
		position: absolute;
		top: 0;
		left: -100%;
		width: 200%;
		height: 100%;
		opacity: 0;

		.cinput {
			width: 100%;
			height: 100%;
			opacity: 0;
		}
	}


}
</style>